<template>
  <div v-if="prev || next" class="page-nav">
    <div class="inner">
      <div class="prev">
        <RouterLink :to="prev.path" v-if="prev">
          {{ prev.title }} <<<
        </RouterLink>
      </div>

      <div class="pos">{{ pageIndex + 1 }} / {{ sidebarItems.length }}</div>

      <div class="next">
        <RouterLink :to="next.path" v-if="next">
          >>> {{ next.title }}
        </RouterLink>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NcPageNav',

  props: ['sidebarItems'],

  computed: {
    pageIndex() {
      return this.sidebarItems.map((item) => item.key).indexOf(this.$page.key)
    },

    prev() {
      if (this.pageIndex !== 0) {
        return this.sidebarItems[this.pageIndex - 1]
      }
    },

    next() {
      if (this.pageIndex !== this.sidebarItems.length) {
        return this.sidebarItems[this.pageIndex + 1]
      }
    },
  },
}
</script>

<style lang="stylus">
@require '../styles/wrapper.styl'

.page-nav
  @extend $wrapper
  padding-top 1rem
  padding-bottom 0
  margin-bottom 40px
  .inner
    min-height 2rem
    margin-top 0
    border-top 1px solid $borderColor
    padding-top 1rem
    overflow auto // clear float

    .prev
      text-align left
    .next
      text-align   right

    @media (min-width 400px)

      display flex
      align-items center
      justify-content space-between

      .prev
      .next
        flex 3

      .pos
        flex 1
        color #cccccc
        text-align center

    @media (max-width 400px)

      .pos
        display none
</style>
